<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验一</title>
    <style>
        a{
            text-decoration: none;
        }
        /*表格内文本上浮，从第一行开始*/
        td {
            vertical-align: baseline;
        }
        /*背景颜色、div高度*/
        .num1{
            background-color: lavender;
            margin: 0 auto;
            width: 1000px;
            height: 30px;
            line-height: 30px;
        }


        /*提示性字体大小与粗细*/
        .num2{
            font-weight: lighter;
            font-size: small;
        }
    </style>
</head>
<body>
<div class="num1">
    <p>产品基本信息</p>
</div>
<table style="margin: 0 auto">
    <colgroup class="col1" ></colgroup>
    <colgroup width="650"></colgroup>
    <tr>
        <td align="right"><span style="color: red">*</span> 产品名称<img src="wenhao.png" width="15"height="15"></td>
        <!--输入框提示语、大小-->
        <td><input type="text" placeholder="如：PU女士手提包（CK12002）" size="50"></td>
    </tr>
    <tr>
        <td align="right">产品型号<img src="wenhao.png" width="15"height="15"></td>
        <td><input type="text" size="20"></td>
    </tr>
    <tr>
        <td align="right"><span style="color: red">*</span>产品图片<img src="wenhao.png" width="15"height="15"></td>
        <td>
            <form >
                <!--单选按钮-->
                <input type="radio" name="上传图片" value="上传单张图片" checked="checked" >上传单张图片
                <input type="radio" name="上传图片" value="上传多张图片">上传多张图片
                <span class="num2">您已提交10个多图产品，还可提交0个.</span>
                <br>
                <!--按钮-->
                <input type="button" value="本地上传">
                <input type="button" value="从图片库选取">
                <br>

                <p class="num2">· 最多添加10个多图产品，每个多图产品最多展示6张图片.</p>
                <p class="num2">· jpg或jpeg格式;不超过300k.</p>
            </form>
        </td>
    </tr>
    <tr>
        <td align="right"><span style="color: red">*</span>关键词<img src="wenhao.png" width="15"height="15"></td>
        <td>
            <input type="text" size="20" maxlength="48"><a href="#"> 关键词建议</a>
            <br>
            ➕<a href="#">更多关键词</a>

            <p class="num2">· 请在每一个文本框中输入一个用于描述您产品的关键字，并控制在48个字符以内。</p>
        </td>
    </tr>
    <tr>
        <td align="right"><span style="color: red">*</span>产品类别</td>
        <td>
            <input type="button" value="选择目录"> 找不到想要的目录？<a href="#">点这里</a>。
        </td>
    </tr>
    <tr>
        <td align="right">产品分组</td>
        <td>
            <from>
                <select name="产品组" >
                    <option >请选择产品组</option>
                    <option >Saabafadfsadgafagsdfa</option>
                    <option >Fiat</option>
                    <option >Audi</option>
                </select>
            </from>

        </td>
    </tr>
    <tr>
        <td align="right"><span style="color: red">*</span>产品描述<img src="wenhao.png" width="15"height="15"></td>
        <td>
            <input type="radio" name="文本编辑器选择" value="富文本编辑器" >富文本
            <input type="radio" name="文本编辑器选择" value="纯文本编辑器" checked>纯文本
            <br>
            <textarea rows="10" cols="80" minlength="60" maxlength="400"></textarea>
            <p class="num2">· 最多100个产品可使用富文本模式编辑，每个产品最多可在描述里插入3张图片；jpg或jpeg格式；不超过300k。</p>
            <p class="num2">· 文本内容控制在60-400个字符内。</p>
        </td>
    </tr>
</table>
<div class="num1">
    <p>
        产品贸易<img src="wenhao.png" width="15"height="15">
        <span class="num2">请详细填写您的报价，让其更易被买家关注。</span>

        <span style="float: right"><input type="checkbox" name="">可洽谈</span>
    </p>
</div>
<table style="margin: 0 auto">
    <colgroup class="col1" ></colgroup>
    <colgroup width="650"></colgroup>
    <tr>
        <td align="right"><span style="color: red">*</span>最小起订量</td>
        <td>
            <input type="text" size="10">
            <select name="" >
                <option>个</option>
                <option>othersgrfgsd</option>
            </select>
            &nbsp;&nbsp;
            <span style="color: red">*</span>FOB价格(USD)
            <input type="text" size="10">
            <select name="" >
                <option>个</option>
                <option>othersfdsgsr</option>
            </select>
            <br>
            ➕<a href="#">新增价格区间</a>
        </td>
    </tr>
    <tr>
        <td align="right"> 港口</td>
        <td>
            <input type="text" size="40">
        </td>
    </tr>
    <tr>
        <td align="right"><span style="color: red">*</span> 支付方式</td>
        <td>
            <input type="checkbox" name="">L/C
            <input type="checkbox" name="">T/T
            <input type="checkbox" name="">D/P
            <input type="checkbox" name="">Paypal
            <input type="checkbox" name="">Money Gram
            <input type="checkbox" name="">Westem Union
            <input type="checkbox" name="">Others
        </td>
    </tr>
</table>
<div class="num1">
    <p>
        展示字段自定义
        <img src="wenhao.png" width="15"height="15">
        <span class="num2">可以从产品属性、自定义属性、交易条件中选择两个自定义信息用于展示厅产品介绍页面的优先展示。</span>
    </p>
</div>
<table style="margin: 0 auto">
    <colgroup class="col1" ></colgroup>
    <colgroup width="650"></colgroup>
    <tr>
        <td align="right">交易条件</td>
        <td>
            <input type="checkbox" name="" value="" checked="checked" >港口 &nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="" value="" checked="checked">支付方式 &nbsp;&nbsp;&nbsp;
        </td>
    </tr>
    <tr>
        <td align="right">产品属性</td>
        <td>
            <input type="checkbox" name="">外观 &nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="">应用 &nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="">成分 &nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="">目标市场 &nbsp;&nbsp;&nbsp;
        </td>
    </tr>
    <tr>
        <td align="right">
            自定义属性
        </td>
        <td  >
            <input type="checkbox" name="">FOB &nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="">CFR &nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="">CIF &nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="">DAT &nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="">FAS &nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="">DDP &nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="">DAP &nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="">FOB &nbsp;&nbsp;&nbsp;
        </td>
    </tr>
</table>
</body>
</html>

